<template>
    <ui-main>
        <van-tabs v-model="active" slot="header">
            <van-tab title="企业基本信息"></van-tab>

            <van-tab title="安全生产基本信息"></van-tab>

            <van-tab title="风险辨识"></van-tab>
        </van-tabs>

        <qyjbxx :id="id" :data-type="data_type" v-show="active === 0"></qyjbxx>
        <aqscjbxx :id="id" v-show="active === 1"></aqscjbxx>

        <!--[风险辨识]-->
        <van-search placeholder="请输入风险点名称" slot="header" v-model.trim="keyword" :disabled="loading" showAction v-show="active === 2">
            <van-loading size="20px" slot="action" v-if="loading"/>
            <div slot="action" @click="onSearch" v-else>搜索</div>
        </van-search>

        <ui-pull @load="getListData" v-model="listData" :total="total" :num.sync="pageNumber" ref="pull" v-show="active === 2">
            <fxbs-item v-for="(item, index) of listData" :key="index" :item="item"></fxbs-item>
        </ui-pull>
        <!--[/风险辨识]-->
    </ui-main>
</template>

<script>
    import qyjbxx from './企业基本信息';
    import aqscjbxx from './安全生产基本信息';
    import fxbsItem from './风险辨识-item';
    import cy from '../mixins/cy';

    export default {
        components: {qyjbxx, aqscjbxx, fxbsItem},
        mixins: [cy],
        data() {
            return {
                // 请求参数
                id: this.$route.query.id,
                name: this.$route.query.name,
                data_type: this.$route.query.data_type,
                // 数据源
                listData: [],
                // 其他
                // 当前被激活的 tab
                active: 0,
                // 搜索关键字
                keyword: '',
                // 页数
                pageNumber: 1,
                // 页码
                pageSize: 20,
                // 总记录数
                total: 0,
                // 是否正在加载：true-是；false-否
                loading: false
            };
        },
        watch: {
            keyword() {
                if (!this.keyword) {
                    this.onSearch();
                }
            }
        },
        mounted() {
            this.$title(this.name);
        },
        methods: {
            getListData({isDownScrolling}) {
                this.loading = true;

                this.$$getRiskPointDetailList({
                    customer_id: this.id,
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize,
                    keyword: this.keyword
                }).then(data => {
                    this.pageNumber++;
                    this.total = data.total;

                    if (isDownScrolling) {
                        this.listData = data.content;
                    } else {
                        this.listData = [...this.listData, ...data.content];
                    }

                    this.$refs.pull && this.$refs.pull.endSuccess();
                    this.loading = false;
                }).catch(e => {
                    console.error(e);

                    this.$refs.pull && this.$refs.pull.endSuccess();
                    this.loading = false;
                });
            },
            onSearch() {
                this.$refs.pull && this.$refs.pull.reload();
            }
        }
    }
</script>
